<template>
  <div class="groupPushPerson">
    <div class="gp-top">
      <div class="top-title">
        <div class="t-flag"></div>
        <div class="t-text">查询</div>
      </div>
      <div class="top-search">
        <div class="s-box">
          <div class="b-account">
            <span class="a-title">账号:</span>
            <input placeholder="请输入账号" type="text" maxlength="11" v-model="account"></input>
            <el-button class="a-search" @click="handleSearch()">搜索</el-button>
            <el-button class="a-export" @click="handleExport()">导出</el-button>
          </div>
        </div>
      </div>
    </div>
      <div class="group-content">
        <div class="show-box" v-if="personPushList.length!==0">
          <div class="bottom-title">
            <div class="t-flag"></div>
            <div class="t-text">{{personPushList.username}}&nbsp;旗下直推会员{{personPushList.count_member}}人</div>
            <div class="money">总金额:{{personPushList.total_money}}</div>
          </div>
         <!-- <div class="title"></div>-->
          <div class="bottom-content-push">
            <div class="content-box" v-for="(item,index) in personPushList.list" :key="index" @click="handleSearch(item.mobile)">
              <div class="box">
                <div class="item-name">{{item.username}}:&nbsp;{{item.mobile}}</div>
                <div class="item-all">投资总额:&nbsp;{{item.money}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="no-data" v-if="!this.personPushList">
            暂无数据
        </div>
      </div>
  </div>
</template>

<script>
    export default {
        name: "GroupPushPerson",
        data(){
          return{
             personPushList:'',
             account:''
          }
        },
        mounted() {
           this.getPushPersonList()
        },
        methods:{
          getPushPersonList(){
            const loading =this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            let data={
              member_id:this.$route.query.memberId
            }
            this.$api.GroupDirectPush(data).then((res)=>{
               if(res.data && res.data.length!==0){
                 this.personPushList=res.data
               }
               loading.close()
            },(err)=>{
              this.$message.error(err.msg)
            })
            setTimeout(()=>{
              loading.close()
            },10000)
          },
          handleSearch(mobile){
            let account=''
            if(mobile){
              account=mobile
            }else{
              if(this.account && this.account.length==11){
                account=this.account
              }else{
                this.$message.error("请输入正确的账号")
                return
              }
            }
            if(account){
              this.$router.push({path:'/menus/group-queryPerson',query:{account:account}})
            }
          },
          handleExport(){
            let url=process.env.API_HOST+"/index.php/dataofuser/getZtMember?member_id="+this.$route.query.memberId+"&to_excel=1"
            const a=document.createElement("a")
            a.setAttribute("download","");
            a.setAttribute("href",url)
            a.click()
          }
        }
    }
</script>

<style scoped lang="less">
    .groupPushPerson{
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      overflow: auto;
      .gp-top{
        width: 100%;
        background-color: #ffffff;
        .top-title{
          height: 50px;
          display: flex;
          align-items: center;
          padding-left: 30px;
          box-sizing: border-box;
          border-bottom: solid 1px #EEEEEE;
          .t-flag{
            width: 3px;
            height: 15px;
            background-color: #2A4BF0;
          }
          .t-text{
            padding-left: 10px;
            font-size: 16px;
            color: #323232;
          }

        }
        .top-search{
          box-sizing: border-box;
          padding: 20px 40px 20px 40px;
          .s-box{
            width: 100%;
            background-color: #F8F8F8;
            .b-account{
              text-align: left;
              position: relative;
              padding: 7px 10px;
              border-radius: 5px;
              box-sizing: border-box;
              .a-title{
                font-size: 14px;
                color: #323232;
              }
              input{
                width: 200px;
                height: 30px;
                font-size: 14px;
                padding: 5px 10px;
                box-sizing: border-box;
                border: solid 1px #DFE2E7;
                border-radius: 3px;
              }
              .a-search{
                margin-left: 20px;
                width: 80px;
                height: 30px;
                padding: 0;
                line-height: 30px;
              }
              .a-export{
                position: absolute;
                right: 20px;
                width: 80px;
                height: 30px;
                padding: 0;
                line-height: 30px;
              }
            }
          }
        }
      }
      .group-content{
        /*height: 100%;*/
        margin-top: 10px;
        background-color: #ffffff;
        .show-box{
          .bottom-title{
            height: 50px;
            display: flex;
            align-items: center;
            padding-left: 30px;
            box-sizing: border-box;
            position: relative;
            .t-flag{
              width: 3px;
              height: 15px;
              background-color: #2A4BF0;
            }
            .t-text{
              padding-left: 10px;
              font-size: 16px;
              color: #323232;
            }
            .money{
              text-align: right;
              font-weight: bold;
              font-size: 15px;
              color: #EA2910;
              /*padding-right: 50px;*/
              position: absolute;
              right: 50px;
            }
          }
          .title{
            text-align: left;
            padding-left: 43px;
          }

          .bottom-content-push{
            padding: 20px 40px 40px 30px;
            display: flex;
            flex-wrap: wrap;
            .content-box{
              cursor: pointer;
              width: 170px;
              height: 100px;
              position: relative;
              background-color: #95A1FD;
              border-radius: 5px;
              margin: 10px 20px;
              color:#ffffff;
              padding: 10px 10px;
              box-sizing: border-box;
              overflow: hidden;
              .box{
                position: absolute;
                top: 10px;
                left: 20px;
                bottom: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                z-index: 10;
                .item-name{
                  text-align: left;
                  font-size: 14px;
                }
                .item-money{
                  text-align: left;
                  font-size: 14px;
                }
                .item-all{
                  text-align: left;
                  font-size: 14px;
                }
              }

            }
            .content-box::after{
              content: '';
              width: 100px;
              height: 100px;
              position: absolute;
              left: 100%;
              bottom: 100%;
              transform: translate(-50%,50%);
              border-radius: 50px;
              background-color: #F9B420;
              z-index: 1;
            }
          }
        }
        .no-data{
          width: 100%;
          background-color:#F2F7F9 ;
          font-size: 20px;
          color: gray;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);

        }
      }
    }
</style>
